<template>
    <div class="login-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>登录</span>
          </div>

        </template>
        <div style="display: flex;justify-content: center;">
        
        <el-radio-group v-model="loginType" size="large">
        <el-radio-button label="员工登录" value="employee" />
        <el-radio-button label="商家登录" value="business" />
        </el-radio-group>
        </div>
        <br>

        <div v-if="loginType === 'employee'">
        <el-form :model="employeeLoginForm"label-width="80px" ref="employeeLoginFormRef">
            <el-form-item label="账号" prop="account">
            <el-input v-model="employeeLoginForm.account"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="nickname">
            <el-input v-model="employeeLoginForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="telephone">
            <el-input v-model="employeeLoginForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="employeeLoginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEmployeeForm(employeeLoginForm)">登录</el-button>
            <el-button @click="resetEmployeeForm(employeeLoginForm)">重置</el-button>
          </el-form-item>
        </el-form>
        </div>

        <div v-else-if="loginType === 'business'">
        <el-form :model="businessLoginForm"  label-width="80px" ref="businessLoginFormRef">
          <el-form-item label="商家账号" prop="account">
            <el-input v-model="businessLoginForm.account"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="telephone">
            <el-input v-model="businessLoginForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="businessLoginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitBusinessForm(businessLoginForm)">登录</el-button>
            <el-button @click="resetBusinessForm(businessLoginForm)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
    import axios from 'axios';

  const loginType = ref('employee');
  const businessLoginFormRef = ref(null);
  const employeeLoginFormRef = ref(null);
  
  // 员工登录表单数据
  const employeeLoginForm = reactive({
    account: '',
    nickname: '',
    telephone: '',
    password: ''
  });
  
  // 商家登录表单数据
  const businessLoginForm = reactive({
    account: '',
    telephone: '',
    password: ''
  });
  
  
  
  // 提交员工登录表单
  const submitEmployeeForm = (employeeLoginForm) => {
    console.log(employeeLoginForm);
    axios.post('http://localhost:7444/login/employee',employeeLoginForm)
    .then(response=>{
      console.log(response.data.data);
      if(response.data.code==200){
        ElMessage.success('登录成功');
         // 将登录返回的数据存储到 sessionStorage 中
         sessionStorage.setItem('employeeData', JSON.stringify(response.data.data));
         console.log(sessionStorage.getItem('employeeData'))
        window.location.href = '/';
      }else{
        ElMessage.error('登录失败');
        
      }
    })
  };
  
  // 重置员工登录表单
  const resetEmployeeForm = () => {
    if (employeeLoginFormRef.value) {
      employeeLoginFormRef.value.resetFields();
    }
  };
  
  // 提交商家登录表单
  const submitBusinessForm = (businessLoginForm) => {
    console.log(businessLoginForm);
    axios.post('http://localhost:7444/login/business',businessLoginForm)
    .then(response=>{
      console.log(response.data.data);
      if(response.data.code==200){
        ElMessage.success('登录成功');
         // 将登录返回的数据存储到 sessionStorage 中
         sessionStorage.setItem('businessData', JSON.stringify(response.data.data));

         console.log(sessionStorage.getItem('businessData'))
         window.location.href = '/';
      }else{
        ElMessage.error('登录失败');
        
      }
    })
  };
  
  // 重置商家登录表单
  const resetBusinessForm = () => {
    if (businessLoginFormRef.value) {
      businessLoginFormRef.value.resetFields();
    }
  };
  </script>
  
  <style scoped>
  .login-container {
    
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('https://img.zcool.cn/community/01237c5bf51747a80121ab5d5d9a70.jpg'); /* 设置背景图片 */
  background-size: cover; /* 使背景图片覆盖整个容器 */
  background-position: center; /* 居中显示背景图片 */
  background-repeat: no-repeat; /* 防止背景图片重复 */

  }
  
  .box-card {
    width: 30%;
    height: 50%;
    background-color: rgba(255, 255, 255, 0.8); /* 设置卡片背景颜色为半透明白色 */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 8px; /* 圆角效果 */
  }
  </style>